.lang-dropdown
  display: flex
  align-items: center
  cursor: pointer
  height: 35px
  padding: 0 15px
  color: #fff
  font-family: $MainFont
  font-smoothing: antialiased
  text-align: center
  font-size: 12px
  line-height: 34px
  transition: background-color 0.5s

  .lang-name
    margin-right: auto

.open .lang-dropdown
  background: $ButtonBg
  border-radius: $ButtonRadius
  background-clip: padding-box

.flag-container
  display: flex
  flex-wrap: wrap
  max-width: 100%
  margin-left: 5px

  .flag
    &:hover
      -webkit-filter: drop-shadow(0px 0px 2px #fff) brightness(1.4)

.flag
  margin: 6px 4px
  background-image: url("../images/flags/question.svg")
  background-size: 24px 24px
  background-position: center
  cursor: pointer
  width: 22px
  height: 16px
  &.none
    background-image: url("../images/flags/none.svg")
  &.toggle
      top: -6px
      border-radius: 0
      background-color: transparent
  &.ar
      background-image: url("/node_modules/flag-icons/flags/4x3/ae.svg")
  &.hy
      background-image: url("/node_modules/flag-icons/flags/4x3/am.svg")
  &.bn
      background-image: url("/node_modules/flag-icons/flags/4x3/bd.svg")
  &.bs
      background-image: url("/node_modules/flag-icons/flags/4x3/ba.svg")
  &.pt-br
      background-image: url("/node_modules/flag-icons/flags/4x3/br.svg")
  &.bg
      background-image: url("/node_modules/flag-icons/flags/4x3/bg.svg")
  &.zh
      background-image: url("/node_modules/flag-icons/flags/4x3/cn.svg")
  &.hr
      background-image: url("/node_modules/flag-icons/flags/4x3/hr.svg")
  &.cs
      background-image: url("/node_modules/flag-icons/flags/4x3/cz.svg")
  &.da
      background-image: url("/node_modules/flag-icons/flags/4x3/dk.svg")
  &.nl
      background-image: url("/node_modules/flag-icons/flags/4x3/nl.svg")
  &.en
      background-image: url("/node_modules/flag-icons/flags/4x3/gb.svg")
  &.et
      background-image: url("/node_modules/flag-icons/flags/4x3/ee.svg")
  &.fa
      background-image: url("/node_modules/flag-icons/flags/4x3/ir.svg")
  &.fi
      background-image: url("/node_modules/flag-icons/flags/4x3/fi.svg")
  &.fr
      background-image: url("/node_modules/flag-icons/flags/4x3/fr.svg")
  &.de
      background-image: url("/node_modules/flag-icons/flags/4x3/de.svg")
  &.el
      background-image: url("/node_modules/flag-icons/flags/4x3/gr.svg")
  &.he
      background-image: url("/node_modules/flag-icons/flags/4x3/il.svg")
  &.hu
      background-image: url("/node_modules/flag-icons/flags/4x3/hu.svg")
  &.it
      background-image: url("/node_modules/flag-icons/flags/4x3/it.svg")
  &.id
      background-image: url("/node_modules/flag-icons/flags/4x3/id.svg")
  &.ja
      background-image: url("/node_modules/flag-icons/flags/4x3/jp.svg")
  &.ka
      background-image: url("/node_modules/flag-icons/flags/4x3/ge.svg")
  &.ko
      background-image: url("/node_modules/flag-icons/flags/4x3/kr.svg")
  &.lv
      background-image: url("/node_modules/flag-icons/flags/4x3/lv.svg")
  &.lt
      background-image: url("/node_modules/flag-icons/flags/4x3/lt.svg")
  &.mk
    background-image: url("/node_modules/flag-icons/flags/4x3/mk.svg")
  &.ms
      background-image: url("/node_modules/flag-icons/flags/4x3/my.svg")
  &.mt
      background-image: url("/node_modules/flag-icons/flags/4x3/mt.svg")
  &.no
      background-image: url("/node_modules/flag-icons/flags/4x3/no.svg")
  &.nb
      background-image: url("/node_modules/flag-icons/flags/4x3/no.svg")
  &.nn
      background-image: url("/node_modules/flag-icons/flags/4x3/no.svg")
  &.pl
      background-image: url("/node_modules/flag-icons/flags/4x3/pl.svg")
  &.pt
      background-image: url("/node_modules/flag-icons/flags/4x3/pt.svg")
  &.ro
      background-image: url("/node_modules/flag-icons/flags/4x3/ro.svg")
  &.ru
      background-image: url("/node_modules/flag-icons/flags/4x3/ru.svg")
  &.sr
      background-image: url("/node_modules/flag-icons/flags/4x3/rs.svg")
  &.sk
      background-image: url("/node_modules/flag-icons/flags/4x3/sk.svg")
  &.sl
      background-image: url("/node_modules/flag-icons/flags/4x3/si.svg")
  &.es
      background-image: url("/node_modules/flag-icons/flags/4x3/es.svg")
  &.sv
      background-image: url("/node_modules/flag-icons/flags/4x3/se.svg")
  &.th
      background-image: url("/node_modules/flag-icons/flags/4x3/th.svg")
  &.tr
      background-image: url("/node_modules/flag-icons/flags/4x3/tr.svg")
  &.uk
      background-image: url("/node_modules/flag-icons/flags/4x3/ua.svg")
  &.vi
      background-image: url("/node_modules/flag-icons/flags/4x3/vn.svg")
  &.sq
      background-image: url("/node_modules/flag-icons/flags/4x3/al.svg")
  &.am
      background-image: url("/node_modules/flag-icons/flags/4x3/et.svg")
  &.az
      background-image: url("/node_modules/flag-icons/flags/4x3/az.svg")
  &.be
      background-image: url("/node_modules/flag-icons/flags/4x3/by.svg")
  &.es-ar
      background-image: url("/node_modules/flag-icons/flags/4x3/ar.svg")
  &.es-mx
      background-image: url("/node_modules/flag-icons/flags/4x3/mx.svg")
  &.fj
      background-image: url("/node_modules/flag-icons/flags/4x3/fj.svg")
  &.ga
      background-image: url("/node_modules/flag-icons/flags/4x3/ie.svg")
  &.gn
      background-image: url("/node_modules/flag-icons/flags/4x3/py.svg")
  &.hi
      background-image: url("/node_modules/flag-icons/flags/4x3/in.svg")
  &.ho
      background-image: url("/node_modules/flag-icons/flags/4x3/pg.svg")
  &.ht
      background-image: url("/node_modules/flag-icons/flags/4x3/ht.svg")
  &.is
      background-image: url("/node_modules/flag-icons/flags/4x3/is.svg")
  &.kk
      background-image: url("/node_modules/flag-icons/flags/4x3/kz.svg")
  &.km
      background-image: url("/node_modules/flag-icons/flags/4x3/kh.svg")
  &.lb
      background-image: url("/node_modules/flag-icons/flags/4x3/lu.svg")
  &.lo
      background-image: url("/node_modules/flag-icons/flags/4x3/la.svg")
  &.mg
      background-image: url("/node_modules/flag-icons/flags/4x3/mg.svg")
  &.mi
      background-image: url("/node_modules/flag-icons/flags/4x3/nz.svg")
  &.mn
      background-image: url("/node_modules/flag-icons/flags/4x3/mn.svg")
  &.my
      background-image: url("/node_modules/flag-icons/flags/4x3/mm.svg")
  &.na
      background-image: url("/node_modules/flag-icons/flags/4x3/nr.svg")
  &.ne
      background-image: url("/node_modules/flag-icons/flags/4x3/np.svg")
  &.ny
      background-image: url("/node_modules/flag-icons/flags/4x3/nw.svg")
  &.ps
      background-image: url("/node_modules/flag-icons/flags/4x3/af.svg")
  &.rm
      background-image: url("/node_modules/flag-icons/flags/4x3/ch.svg")
  &.rn
      background-image: url("/node_modules/flag-icons/flags/4x3/bi.svg")
  &.rw
      background-image: url("/node_modules/flag-icons/flags/4x3/rw.svg")
  &.si
      background-image: url("/node_modules/flag-icons/flags/4x3/lk.svg")
  &.sm
      background-image: url("/node_modules/flag-icons/flags/4x3/ws.svg")
  &.sn
      background-image: url("/node_modules/flag-icons/flags/4x3/zw.svg")
  &.so
      background-image: url("/node_modules/flag-icons/flags/4x3/so.svg")
  &.tg
      background-image: url("/node_modules/flag-icons/flags/4x3/tj.svg")
  &.ti
      background-image: url("/node_modules/flag-icons/flags/4x3/er.svg")
  &.tk
      background-image: url("/node_modules/flag-icons/flags/4x3/tm.svg")
  &.ua
      background-image: url("/node_modules/flag-icons/flags/4x3/ua.svg")
  &.ur
      background-image: url("/node_modules/flag-icons/flags/4x3/pk.svg")
  &.uz
      background-image: url("/node_modules/flag-icons/flags/4x3/uz.svg")
  &.gl
      background-image: url("/node_modules/flag-icons/flags/4x3/es-ga.svg")
  &.ca
      background-image: url("/node_modules/flag-icons/flags/4x3/es-ca.svg")
  &.oc
      background-image: url("/node_modules/flag-icons/flags/4x3/es-ca.svg")
  &.tl
      background-image: url("/node_modules/flag-icons/flags/4x3/ph.svg")
  &.br
      background-image: url("/node_modules/flag-icons/flags/4x3/fr.svg")
  &.ig
      background-image: url("/node_modules/flag-icons/flags/4x3/ng.svg")
  &.tt
      background-image: url("/node_modules/flag-icons/flags/4x3/ru.svg")
  &.ml
      background-image: url("/node_modules/flag-icons/flags/4x3/in.svg")
  &.te
      background-image: url("/node_modules/flag-icons/flags/4x3/in.svg")
  &.or
      background-image: url("/node_modules/flag-icons/flags/4x3/in.svg")
  &.kn
      background-image: url("/node_modules/flag-icons/flags/4x3/in.svg")
  &.ea
      background-image: url("/node_modules/flag-icons/flags/4x3/es.svg")
  &.sp
      background-image: url("/node_modules/flag-icons/flags/4x3/es.svg")
  &.ze
      background-image: url("/node_modules/flag-icons/flags/4x3/cn.svg")
  &.zt
      background-image: url("/node_modules/flag-icons/flags/4x3/cn.svg")


